<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS实战 - 波纹扩散效果</title>
	<!-- <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/fonts/fontawesome-webfont.svg"> -->
 
	<style type="text/css">
		body {
			margin: 0;
		}
 
       
 
		/************以下为具体实现************/
 
		.wave {
			position: relative;
		    width: 100px;
		    height: 100px;
		    text-align: center;
		    line-height: 100px;
		    font-size: 28px;
		}
 
		.wave .circle {
		    position: absolute;
		    border-radius: 50%;
		    opacity: 0;
		}
 
		/* 波纹效果 */
		.wave.ripple .circle {
		    width: calc(100% - 6px); /* 减去边框的大小 */
    		height: calc(100% - 6px);/* 减去边框的大小 */
		    border: 3px solid #fff;
		}
 
		.wave.ripple .circle:first-child {
			animation: circle-opacity 1s infinite;
		}
 
		.wave.ripple .circle:nth-child(2) {
			animation: circle-opacity 1s infinite;
			animation-delay: .3s;
		}
 
		/* .wave.ripple .circle:nth-child(3) {
		 	animation: circle-opacity 1s infinite;
			animation-delay: .6s;
		} */
 
		/* .wave.ripple.danger {
		    color: red;
		}
  */
		.wave.ripple.danger .circle {
			border-color: #2E5DEA;
		}
 
		/* .wave.ripple.warning {
		    color: orange;
		}
 
		.wave.ripple.warning .circle {
		    border-color: orange;
		}
  */
		/* 波动效果
		.wave.solid .circle{
			width: 100%;
    		height: 100%;
		    background: #fff;
		}
 
		.wave.solid .circle:first-child {
			animation: circle-opacity 1s infinite;
		}
 
		.wave.solid.danger {
			color: red;
		}
 
		.wave.solid.danger .circle{
			background: red;
		}
		
		.wave.solid.warning {
			color: orange;
		}
 
		.wave.solid.warning .circle{
			background: orange;
		}
  */
		@keyframes circle-opacity{
		    from {
		        opacity: 1;
		        transform: scale(0);
		    }
		    to {
		        opacity: 0;
		        transform: scale(1);
		    }
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="wave ripple danger">
			<div class="circle"></div>
			<div class="circle"></div>
			<!-- <div class="circle"></div> -->
			<div class="content">
				<i class="fa fa-bell"></i>
			</div>
		</div>
 
		
    </div>
    <div style="height:100px">
        <img height="100%" src="./aa.gif" alt="">
    </div>
</body>
</html>
